<template>
    <div class="circle-node">
      <handle type="target" position="top" />
      <div class="circle">
        <div class="label">{{ data.label }}</div>
      </div>
      <handle type="source" position="bottom" />
    </div>
  </template>
  
  <script setup>
  import { Handle } from '@vue-flow/core'
  defineProps({ data: Object })
  </script>
  
  <style scoped>
  .circle-node {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: visible; /* 允许 handle 溢出 */
  }
  
  .circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ff9f1c;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .label {
    pointer-events: none;
  }
  </style>
  